<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Homy</title>
    
     <!-- Le fav and touch icons -->
	<link rel="shortcut icon" href="image/logoHomy.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="image/logoHomy144.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="image/logoHomy114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="image/logoHomy72.png">
    <link rel="apple-touch-icon-precomposed" href="image/logoHomy57.png">

    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Angular -->
	<script src="lib/angular.min.js"></script>
	<script src="lib/angular-route.min.js"></script>
	<!-- Code de l'application -->
	<script src="javascript/appDefinition.js"></script>
	<script src="javascript/controllers.js"></script>
	<link href="css/style.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body ng-app="homeRouteProvider" ng-controller="accueilController">
	<img class="bghome" src="{{img}}"></img>
	
	<div class="container accueil">
		<div class="row"><div class="col-md-12"><div class="accueilFont">Homy</div></div></div>
		<div class="row"><div class="col-md-12">
			<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#connexionModal" >Connexion</button>
			<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#createCompteModal">Créer un compte</button>
		</div></div>
	</div>
	
	<div class="accueilInfo">
		<a id="popover" href="" 
			data-toggle="popover" data-placement="top" data-html="true"
			data-content="Homy, application développée par Charlie Camus.<br/>Bootstrap, Bootswatch, nodejs, angularjs, glyphicons.">
			<span class="glyphicon glyphicon-info-sign"></span>
		</a>
	</div>
	
	<!-- Modal connexion -->
	<div class="modal fade" id="connexionModal" tabindex="-1" role="dialog" aria-hidden="true">
	  <div class="modal-dialog">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h4 class="modal-title" id="myModalLabel">Connexion utilisateur</h4>
		  </div>
			<form class="form-horizontal" role="form">
			  <div class="modal-body">
				   <div class="form-group">
						<label for="mail" class="col-sm-2 control-label">Adresse mail</label>
						<div class="col-sm-10">
							<input type="email" class="form-control" id="mail" placeholder="Email" ng-model="loginUser.mail">
						</div>
					</div>
				   <div class="form-group">
						<label for="password" class="col-sm-2 control-label">Mot de passe</label>
						<div class="col-sm-10">
							<input type="password" class="form-control" id="password" placeholder="Mot de passe" ng-model="loginUser.mdp">
						</div>
					</div>
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
				<button type="submit" class="btn btn-primary" ng-click="login()" onClick="$('#connexionModal').modal('toggle')">Connexion</button>
			  </div>
			 </form>
		</div>
	  </div>
	</div>
	
	<!-- Modal Creation de compte -->
	<div class="modal fade" id="createCompteModal" tabindex="-1" role="dialog" aria-hidden="true">
	  <div class="modal-dialog">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h4 class="modal-title" id="myModalLabel">Création d'un compte</h4>
		  </div>
			<form class="form-horizontal" role="form">
			  <div class="modal-body">
					<div class="form-group">
						<label for="nom" class="col-sm-2 control-label">Nom</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="nom" placeholder="Nom" ng-model="userCreate.nom">
						</div>
					</div>
					<div class="form-group">
						<label for="prenom" class="col-sm-2 control-label">Prenom</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="prenom" placeholder="Prenom" ng-model="userCreate.prenom">
						</div>
					</div>
				   <div class="form-group">
						<label for="mail" class="col-sm-2 control-label">Adresse mail</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="mail" placeholder="Email" ng-model="userCreate.mail">
						</div>
					</div>
				   <div class="form-group">
						<label for="password" class="col-sm-2 control-label">Mot de passe</label>
						<div class="col-sm-10">
							<input type="password" class="form-control" id="password" placeholder="Mot de passe" ng-model="userCreate.mdp">
						</div>
					</div>
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
				<button type="submit" class="btn btn-primary" ng-click="creUser()" onClick="$('#createCompteModal').modal('toggle')">Créer un compte</button>
			  </div>
			 </form>
		</div>
	  </div>
	</div>
	
	<!-- Modal Ok Creation de compte -->
	<div class="modal fade" id="createCompteOkModal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<div class="row">
						<div class="col-md-10">
							<div class="alert alert-success">Création de compte effectuée</div>
						</div>
						<div class="col-md-2">
							<button type="button" class="btn btn-lg btn-success" onClick="$('#createCompteOkModal').modal('toggle')">Ok</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="lib/jquery-1.11.0.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  </body>
 </html>
